import { forwardRef } from "preact/compat";
import { themes, engines, checkEngine } from "../engines";
import { settings } from "../settings";

const EngineBar = forwardRef(({ focusInput }, reference) =>
  settings.value.searchPart.showEngine ? (
    <div ref={reference} class="tabs tabs-border tabs-xs my-2 justify-center">
      {engines.value.map((engine) => (
        <input
          type="radio"
          name="engines"
          class={`tab ${engine.checked ? themes[engine.theme][3] : ""}`}
          checked={engine.checked}
          aria-label={engine.name}
          onClick={() => {
            checkEngine(engine.name);
            focusInput();
          }}
          key={engine.name}
        />
      ))}
    </div>
  ) : (
    void 0
  ),
);

export default EngineBar;
